<template>
    <!-- 弹窗 -->
 <el-dialog v-model="dialogVisible" title="修改角色" width="60%">
     <el-form :model="role">
         <el-form-item label="角色名称" :label-width="formLabelWidth" required>
             <el-input v-model="role.roleName" autocomplete="off" />
         </el-form-item>
         <el-form-item label="角色描述" :label-width="formLabelWidth" required>
             <el-input v-model="role.roleDesc" autocomplete="off" />
         </el-form-item>
     </el-form>

     <template #footer>
         <span class="dialog-footer">
             <el-button @click="dialogVisible = false">取消</el-button>
             <el-button type="primary" @click="EditConfirm">确定</el-button>
         </span>
     </template>

 </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { EditRole } from "@/api/role";
// 控制弹出窗显示
const dialogVisible = ref(false)
const formLabelWidth = '110px'

const ind =ref()
const id = ref()

const role = reactive({
    roleName : "",
    roleDesc:""
})

const emit = defineEmits(["getEdit"])

// 打开弹窗
const editDialog = (index:number,row:{
    roleName:string;
    roleDesc:string;
})=>{
    console.log(row,index,"编辑啊啊啊")
    dialogVisible.value = true
    role.roleName = row.roleName
    role.roleDesc = row.roleDesc
    id.value = row.id
    ind.value = index
}

// 将子组件方法暴露出去
defineExpose({
    editDialog
});

// 编辑确认
const EditConfirm = async ()=>{
    dialogVisible.value = false

    let res = await EditRole(id.value,{
        roleName:role.roleName,
        roleDesc:role.roleDesc
    })
    console.log(res)

    emit("getEdit",ind.value,role)

    // 确认后重置
    role.roleName=""
    role.roleDesc=""
    // console.log(role.name)
}
</script>